@import '../../app/variables';

:root {
  --sub-title-color: var(--color-grayscale-dark);
  --address-color: var(--color-primary-medium);
  --address-animation-delay: 1200ms;
  --address-animation-duration: 1000ms;
  --header-animation-duration: 450ms;
  --second-header-animation-delay: 1000ms;
  --steps-nav-height: 22px;
  --header-font-size: var(--paragraph-font-size-l);
}

.table {
  width: 100%;
  height: 100%;
  display: table;

  & .tableCell {
    display: table-cell;
    vertical-align: middle;
  }
}

.hidden {
  display: none;
}

.verifier {
  text-align: center;
  height: calc(100% - var(--steps-nav-height));
  margin-right: 0px;
  margin-left: 0px;
  overflow-y: auto;

  & h2 {
    font-size: 48px;
  }

  & > section {
    height: 55%;
  }

  & > header {
    height: 30%;
  }

  & header {
    font-size: var(--header-font-size);

    & h2,
    & h5 {
      max-width: 750px;
      margin: 0 auto;
    }

    & h2.done {
      max-width: 320px;
    }

    & h5 {
      visibility: hidden;
      height: 0;
      opacity: 0;
      font-size: 18px;
      color: var(--color-error);
      transition: all ease 500ms;
    }
  }

  &.verify {
    & > section.done {
      display: none;
    }

    & h5 {
      &.visible {
        visibility: visible;
        height: auto;
        opacity: 1;
        transition-delay: 500ms;
      }
    }
  }

  &.done {
    & > section.verify {
      display: none;
    }

    & > section {
      & .tableCell {
        vertical-align: top;
      }
    }

    & h4 {
      color: var(--address-color);
      margin: 16px auto;
    }

    & figure {
      & img {
        height: 200px;
      }
    }

    & .button {
      margin-bottom: 50px;
    }
  }
}

@media (--small-viewport) {
  .verifier {
    overflow-y: scroll;
    -webkit-overflow-scrolling: touch;

    & h2 {
      width: 260px;
      font-size: 40px !important;
    }

    & h5 {
      width: 80%;
    }
  }
}
